<template>
  <div class="page-course-home">
    <br />
    <br />
    <Time></Time>
    <br />

    <Row
      index=""
      v-for="(item, index) in courses"
      :key="index"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <Col span="2" align="center" style="width:100px">
        <Button
          type="primary"
          long
          size="large"
          style="height: 50px;margin-top:16px;"
          >{{ item.className }}
        </Button>
      </Col>
      <Col
        span="2"
        align="center"
        v-for="el in item.data"
        :key="el.id"
        style="width:120px"
      >
        <Button
          long
          size="large"
          style="height: 50px;margin-top:16px"
          @click="toClass(item, el)"
          >{{ el.num }}节</Button
        >
      </Col>
      <Col span="2" align="center" style="width:60px"> <div></div></Col>
    </Row>

    <Row>
      <Col span="12">
        <div style="margin: 30px 10px;margin-bottom:120px;">
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 16px">剩余课时数量：123节</span>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import Time from './time'
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  components: { Time },
  computed: mapState({
    courses: store => store.course.courses
  }),
  mounted () {
    this.$store.dispatch('getCourses')
  },
  methods: {
    toClass (item, el) {
      console.log('toClass', item, el)
      const classId = item.id
      const startTime = el.startTime
      const endTime = el.endTime
      this.$store.commit('changeCurrentWeek', { classId, startTime, endTime })
      this.$store.commit('changeIsShowClass', true)
    }
  }
}
</script>

<style lang="less" scoped>
.page-course-home {
  width: 90%;
  margin-left: 30px;
}
</style>
